<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>css基础</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style>
    li.create-css {
        color: blue;
    }
    </style>
</head>

<body>
    <h1>id 和 class 选择器</h1>
    <h2>id 选择器</h2>
    <p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。</p>
    <h3>实例</h3>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>

    <h2>class 选择器</h2>
    <p>class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示</p>
    <p class="center">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>

    <h1>创建 css</h1>
    <ul>
        <li class="create-css">外部样式表</li>
        <li class="create-css">内部样式表</li>
        <li class="create-css" style="color:yellow;">内联样式</li>
    </ul>
    <p>通过上面的例子，我们可以看到样式的优先级为：（内联样式）Inline style &gt; （内部样式）Internal style sheet &gt;（外部样式）External style sheet &gt; 浏览器默认样式</p>

    <h1>常用属性</h1>
    <h2>背景</h2>
    <ul>
        <li>background-color</li>
        <li>background-image</li>
        <li>background-repeat</li>
        <li>background-attachment</li>
        <li>background-position</li>
    </ul>

    <h1>文本</h1>
    <h2>文本颜色</h2>
    <div class="text-color">
        <h1 class="text-color">这是标题 1</h1>
        <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
        <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
    </div>

    <h2>文本的对齐方式</h2>
    <div>
        <h1 class="text-align">CSS text-align 实例</h1>
        <p class="text-align date">2019 年 8 月 2 号</p>
        <p class="text-align main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
    </div>

    <h2>文本修饰</h2>
    <p>链接到: <a class="no-dec" href="/index.html">runoob.com</a></p>
    <h3 class="text-overline">This is heading 1</h1>
    <h3 class="text-line-through">This is heading 2</h2>
    <h3 class="underline">This is heading 3</h3>

    <h2>文本转换</h2>
    <p class="uppercase">This is some text.</p>
    <p class="lowercase">This is some text.</p>
    <p class="capitalize">This is some text.</p>

    <h2>文本缩进</h2>
    <p class="indent">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

    <h1>字体</h1>
    <p class="serif">这一段的字体是 Times New Roman </p>
    <p class="sansserif">这一段的字体是 Arial.</p>

    <p class="normal">这是一个段落,正常。</p>
    <p class="italic">这是一个段落,斜体。</p>
    <p class="oblique">这是一个段落,斜体。</p>

    <h1 class="font-size-px">This is heading 1</h1>
    <h2 class="font-size-px">This is heading 2</h2>
    <p class="font-size-px">This is a paragraph.</p>

    <h1 class="font-size-em">This is heading 1</h1>
    <h2 class="font-size-em">This is heading 2</h2>
    <p class="font-size-em">This is a paragraph.</p>

    <h1>链接</h1>
    <p><b><a class="link" href="/index.html" target="_blank">这是一个链接</a></b></p>
    <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
    <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

    <h1>列表</h1>
    <p>无序列表实例:</p>

    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <ul class="b">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <p>有序列表实例:</p>

    <ol class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

    <ol class="d">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

    <h1>表格</h1>

    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
        </tr>
    </table>

    <h1>盒子模型(Box Model)</h1>

    <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
    <div class="box-model">这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

    <h1>边框</h1>
    <h2>边框样式</h2>
    <p class="none">无边框。</p>
    <p class="dotted">虚线边框。</p>
    <p class="dashed">虚线边框。</p>
    <p class="solid">实线边框。</p>
    <p class="double">双边框。</p>
    <p class="groove"> 凹槽边框。</p>
    <p class="ridge">垄状边框。</p>
    <p class="inset">嵌入边框。</p>
    <p class="outset">外凸边框。</p>
    <p class="hidden">隐藏边框。</p>
    <p class="multi">隐藏边框。</p>

    <h2>边框宽度</h2>
    <p class="one">一些文本。</p>
    <p class="two">一些文本。</p>
    <p class="three">一些文本。</p>
    <p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>

    <h1>分组选择器和嵌套选择器</h1>
    <p>这个段落是蓝色文本，居中对齐。</p>
    <div class="marked">
        <p>这个段落不是蓝色文本。</p>
    </div>
    <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

    <h1>显示</h1>
    <h1 class="hidden">这是一个隐藏标题</h1>
    <p>注意隐藏标题仍然占用空间。</p>

    <h2 class="hidden">这是一个隐藏标题</h2>
    <p>注意displaynone标题不占用空间。</p>

    <p>链接列表水平显示：</p>

    <ul>
        <li class="inline"><a href="/index.html" target="_blank">HTML</a></li>
        <li class="inline"><a href="/index.html" target="_blank">CSS</a></li>
        <li class="inline"><a href="/index.html" target="_blank">JavaScript</a></li>
        <li class="inline"><a href="/index.html" target="_blank">XML</a></li>
    </ul>

    <h1>定位</h1>

    <ul>
        <li>static定位 默认值</li>
        <li>fixed定位 固定不随窗口移动</li>
        <li>relative定位 相对定位元素的定位是相对其正常位置</li>
        <li>absolute定位 绝对定位的元素的位置相对于最近的已定位父元素</li>
        <li>sticky定位 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换</li>
        <li>重叠的元素 z-index属性指定了一个元素的堆叠顺序</li>
    </ul>

    <h1>overflow</h1>
    <div id="overflowTest">
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    </div>

    <h1>float</h1>
    <p> Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。</p>
    <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src='https://www.runoob.com/try/demo_source/img_tree.png' style='float:right;' />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
    </p>

    <h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="107" height="90">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="107" height="80">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="116" height="90">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="120" height="90">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="107" height="90">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="107" height="80">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="116" height="90">
<img class="thumbnail" src='https://www.runoob.com/try/demo_source/img_tree.png' width="120" height="90">

    <h1>组合选择符</h1>
    <h2>后代选择器(以空格分隔)</h2>
    <p>后代选择器用于选取某元素的后代元素。</p>
    <h2>子元素选择器(以大于号分隔）</h2>
    <p>与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。</p>
    <h2>相邻兄弟选择器（以加号分隔）</h2>
    <p>相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。</p>
    <h2>普通兄弟选择器（以破折号分隔）</h2>
    <p>后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。</p>
    <div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>

    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

    <h1>伪类</h1>
    <p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>

    <h1>伪元素</h1>
    <p class="pseudo">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>

</html>